.about {
    padding: var(--space-l) var(--space-s);

    .about__articles {
        display: flex;
        flex-direction: column;
        gap: var(--space-l);
    }

    .about__article {
        display: flex;
        align-items: center;
        gap: var(--space-l);
    }

    .about__article:nth-child(2n) {
        flex-direction: row-reverse;
    }

    .about__article-image {
        width: 48%;
        height: 100%;
        min-height: 400px;
        object-fit: cover;
        object-position: center;
        box-shadow: 10px 5px 45px rgba(25, 33, 67, 0.35);
    }

    .about__article-text {
        max-width: 45%;
    }
}

.features {
    padding: var(--space-xl) 0;
    text-align: center;

    .features__container {
        margin: 0 auto;
        justify-content: center;
        gap: var(--space-l);
    }

    .features__tiles {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--space-s);
    }

    .features__tile {
        min-height: 160px;
        width: 32%;
        padding: 32px 16px;
        justify-content: center;
        border-radius: 18px;
        background-color: var(--pp-blue);
        box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
        gap: 8px;
        transition: transform 0.2s ease-in-out;
    }

    .features__tile:hover {
        transform: scale(1.01);
    }

    .features__tile-text {
        margin: 0;
        font-size: var(--step--1);
        color: #fff;
    }

    .features__tile-title {
        color: var(--pp-yellow);
        font-size: var(--step-1);
    }
}

.usp {
    padding: var(--space-xl) 0;
    background-color: #00263d;

    .usp__title {
        color: #fff;
    }

    .usp__container {
        margin: 0 auto;
        justify-content: center;
        gap: var(--space-l);
    }

    .usp__tiles {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-s);
    }

    .usp__tile {
        width: 48%;
        max-width: 670px;
        padding: var(--space-m);
        display: flex;
        flex-direction: column;
        gap: var(--space-s);
        color: #fff;
        background: #072d44;
    }

    .usp__image {
        width: fit-content;
        object-fit: cover;
    }
}

@media all and (max-width: 992px) {
    .about {
        .about__article,
        .about__article:nth-child(2n) {
            flex-direction: column;
        }

        .about__article-image {
            width: 100%;
            max-width: 720px;
            margin: 0 auto;
        }

        .about__article-text {
            max-width: 100%;
        }
    }

    .features {
        .features__tile {
            width: 48%;
        }
    }

    .usp {
        .usp__tiles {
            justify-content: center;
        }

        .usp__tile {
            width: 100%;
        }
    }
}

@media only screen and (max-width: 576px) {
    .features {
        .features__tile {
            width: 100%;
        }
    }
}